import 'package:flutter/material.dart';

class CustomView extends StatelessWidget {
  const CustomView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // 1. 导航条
        appBar: AppBar(
          title: const Text(
            '自定义滚动视图',
            style: TextStyle(color: Colors.white),
          ),
          backgroundColor: Colors.pink,
          centerTitle: true,
        ),
        // 2. 主体部分
        body: CustomScrollView(
          slivers: [
            // 2.1 上部分
            SliverGrid.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3, mainAxisSpacing: 10, crossAxisSpacing: 10),
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  color: Colors.cyan,
                  alignment: Alignment.center,
                  child: Text('宫格布局$index'),
                );
              },
              itemCount: 6,
            ),

            const SliverPadding(padding: EdgeInsets.only(top:100)),
  
            // 2.2 下部分
            SliverList.separated(
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    padding: const EdgeInsets.all(10),
                    child: Container(
                      height: 120,
                      color: Colors.deepOrange,
                      child: Text('下边列表$index'),
                    ),
                  );
                },
                itemCount: 20,
                separatorBuilder: (BuildContext context, int index) {
                  return Container(
                    height: 1,
                    color: Colors.grey,
                  );
                })
          ],
        ));
  }
}
